<template>
	<view class="couponsPage">
		<!-- 活动规则 -->
		<view class="activeRules">
			<view class="title">活动名称</view>
			<view class="content">
				<view>
					<view>
						<u-icon name="calendar" color="#606266" size="40"></u-icon>
					</view>
					<view>活动期限</view>
					<view>2022.5.5-2022.6.5</view>
				</view>
				<view>
					<view>
						<u-icon name="clock" color="#606266" size="36"></u-icon>
					</view>
					<view>活动时间段</view>
					<view>8:00-12:00, 13:00-18:00</view>
				</view>
				<view>
					<view>
						<u-icon name="account" color="#606266" size="40"></u-icon>
					</view>
					<view>适用用户</view>
					<view>部分用户</view>
				</view>
				<view>
					<view>
						<u-icon name="map" color="#606266" size="40"></u-icon>
					</view>
					<view>适用站点</view>
					<view>站点1、站点2、站点3、站点4</view>
				</view>
			</view>
		</view>
		<view class="ladderBox">
			<view :style="{ color: ladderIndex == 1?`${defaultColor}`:'' }" @click="changeLeaderTab('1')">充电量</view>
			<view :style="{ color: ladderIndex == 2?`${defaultColor}`:'' }" @click="changeLeaderTab('2')">充电次数</view>
			<view :style="{ color: ladderIndex == 3?`${defaultColor}`:'' }" @click="changeLeaderTab('3')">单笔充电</view>
		</view>
		<view class="LVItem" v-for="(item,index) in marketSpreadRuleVoList" :key="index">
			<view class="LV1">
				<view class="title">{{ item.spreadLevelName }}</view>
				<view class="desc" v-if="ladderIndex == 1">：累计充电 满
					{{ item.needSpreadStartNum }}-{{ item.needSpreadEndNum }} 都</view>
				<view class="desc" v-if="ladderIndex == 2">：累计充电次数 满
					{{ item.needSpreadStartNum }}-{{ item.needSpreadEndNum }} 次</view>
				<view class="desc" v-if="ladderIndex == 3">：单笔充电达到
					{{ item.needSpreadStartNum }}-{{ item.needSpreadEndNum }} 度</view>
			</view>
			<view class="rewardBox">
				<view style="height: 40px;" v-if="!item.marketCouponVoList||item.marketCouponVoList.length == 0">
					暂无数据
				</view>
				<view class="integralCouponList" v-else v-for="(citem,cindex) in item.marketCouponVoList" :key="cindex">
					<view class="integralCouponItem" :style="{ backgroundImage: 'url(' + integralBg + ')' }">
						<view>{{ citem.couponQuota }}</view>
						<view>{{ citem.couponTypeStr }}</view>
					</view>
				</view>
				<view style="height: 40px;" v-if="!item.marketCardVoList||item.marketCardVoList.length == 0">
					暂无数据
				</view>
				<view class="cashCouponList" v-else v-for="(mitem,mindex) in item.marketCardVoList" :key="mindex">
					<view class="cashCouponItem" :style="{ backgroundImage: 'url(' + redBg + ')' }">
						<view>{{ mitem.cardTypeStr }}</view>
						<view>￥{{ mitem.cardQuota }}</view>
						<view>{{ mitem.cardNotApplyCause }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom_shuoming">
			<view class="title">活动说明</view>
			<view>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
				dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan
				lacus vel facilisis.
			</view>
		</view>
		<view style="width: 100%; height: 200rpx"></view>
	</view>
</template>

<script>
	import {
		getConsumeActivityDetail
	} from "@/api/marketing/invitation";
	const app = getApp();
	export default {
		data() {
			return {
				ladderIndex: '1',
				defaultColor: uni.getStorageSync('defaultColor_Green'),
				couponShow: true,
				integralBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/integral-bg.png`,
				redBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/Red-bg.png`,
				marketSpreadRuleVoList: [{
					spreadLevelName: '阶梯一',
					needSpreadStartNum: '1',
					needSpreadEndNum: '10',
					marketCouponVoList: [{
						couponQuota: '30',
						couponTypeStr: '现金券',
					}],
					marketCardVoList: [{
						cardTypeStr: '30',
						cardQuota: '折扣券',
						cardNotApplyCause: '现金券',
					}]
				}],
				detailInfo: {},
			};
		},
		onLoad(options) {
		    console.log(options);
		    this.setData({
		        HD: options.HD
		    });
		},
		onShow() {
		    console.log(this.HD, 'sssssssssssssss');
		    // this.getHdDetail();
		},
		methods: {
			changeLeaderTab(val) {
				this.ladderIndex = val
			},
			//获取站点累计消费活动详情
			getHdDetail() {
			    getConsumeActivityDetail({
			        id: this.HD,
			        plUserId: uni.getStorageSync('memberId')
			    }).then((res) => {
			        console.log(res.data, 'lllllllll');
			        if (res.code == 200) {
			            this.setData({
			                activityDetail: res.data.activityDetail,
			                jlfsDetail: {
			                    fwf: res.data.serviceFeeDetail,
			                    jlj: res.data.bonusDetailList,
			                    jf: res.data.integralDetailList
			                },
			                yhqDetail: res.data.couponDetailList
			            });
			        }
			    });
			}
		},
	};
</script>

<style lang="less" scoped>
	.couponsPage {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	.topBg {
		width: 100%;
		height: 420rpx;

		.topImg {
			width: 100%;
			height: 100%;
		}
	}

	.activeRules {
		width: 94%;
		// height: 267rpx;
		margin: 16rpx auto;
		// background: linear-gradient(360deg,
		//         #ffffff 0%,
		//         #ffffff 31%,
		//         #f4f6f8 99%,
		//         #f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;
		background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
		padding: 32rpx;
		box-sizing: border-box;

		.title {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #303133;
			border-bottom: 1rpx solid rgba(220, 223, 230, 1);
		}

		.illustrate {
			padding: 0 32rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 400;
			color: #303133;
			margin-top: 45rpx;
		}

		.content {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			
			>view {
			    width: 100%;
			    line-height: 60rpx;
			    font-size: 28rpx;
			    color: #606266;
			    display: flex;
			    flex-direction: row;
			    justify-content: flex-start;
			    align-items: center;
			
			    >view:nth-of-type(1) {
			        width: 60rpx;
			    }
			
			    >view:nth-of-type(2) {
			        width: 150rpx;
			    }
			
			    >view:nth-of-type(3) {
			        margin-left: 20rpx;
			        color: #303133;
			    }
			}
		}
	}

	.LV1,
	.LV2 {
		width: 94%;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin: 40rpx auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.title {
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #303133;
			line-height: 34rpx;
		}

		.desc {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #606266;
			line-height: 36rpx;
		}
	}

	.rewardBox {
		width: 94%;
		//   min-height: 800rpx;
		padding: 40rpx;
		box-sizing: border-box;
		margin: 16rpx auto;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;
	}

	.integralCouponList {
		width: 100%;
		//   padding: 0 40rpx;
		//   box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.integralCouponItem {
		width: 200rpx;
		height: 190rpx;
		color: #fc724c;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;

		>view:nth-of-type(2) {
			color: #a14b20;
			margin-top: 40rpx;
			font-size: 22rpx;
		}
	}

	.cashCouponList {
		width: 90%;
		//   height: 400rpx;
		margin: 24rpx auto 0 auto;
		background: #fdf1e5;
		border-radius: 10rpx;
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.cashCouponItem {
		width: 137rpx;
		height: 142rpx;
		margin: 0 24rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		>view:nth-of-type(1) {
			color: #a26d35;
			font-size: 20rpx;
		}

		>view:nth-of-type(2) {
			color: #f0703e;
			font-size: 22rpx;
			font-weight: 600;
		}

		>view:nth-of-type(3) {
			color: #fad9b1;
			font-size: 22rpx;
		}
	}

	.bottomBtn {
		width: 100%;
		height: 120rpx;
		background: linear-gradient(360deg, #ffffff 0%, #f4f6f8 99%, #f4f6f8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.button {
			width: 92%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			// background: #1487fa;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			opacity: 1;
			font-size: 30rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.ladderBox {
		width: 94%;
		margin: 40rpx auto;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		.active {}
	}

	.bottom_shuoming {
		width: 94%;
		background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;
		margin: 40rpx auto;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.title {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #303133;
			border-bottom: 1rpx solid rgba(220, 223, 230, 1);
		}

		>view:nth-of-type(1) {
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #303133;
		}

		>view:nth-of-type(2) {
			margin-top: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #303133;
		}
	}
</style>